【CSS】content - 擬似要素の内容（::before / ::after）

CSSのcontentプロパティについて解説します。

検証環境

CSS

macOS

14.1

content

contentは“擬似要素の内容”のプロパティです。

擬似要素のbeforeやafter、marker等と合わせて使用します。

基本構文

content: 値;

値

代表的な値は次の通りです。

値	意味
none	内容なし
テキスト	テキストの内容
画像	url()で読み込む画像

サンプル

テキスト

sample.html

<style>
p::before {
    ___ih_hl_start
    content: "[SAMPLE] ";
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

画像

sample.html

<style>
p::after {
    ___ih_hl_start
    content: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/content/icon.png');
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー